<template>
  <div class="user-wrapper">
    <div class="content-box">
      <!--<a href="" target="_blank">
        <span class="action">
          <a-icon type="question-circle-o"></a-icon>
        </span>
      </a>-->

      <span class="action" @click="toggleFullscreen">
        <a-icon type="fullscreen-exit" v-if="isFullscreen" />
        <a-icon type="fullscreen" v-else />
      </span>
      <notice-icon class="action" v-if="hasPerm('sysNotice:received')" />

      <a-dropdown>
        <span class="action ant-dropdown-link user-dropdown-menu">
          <a-avatar class="avatar" size="small" :src="avatar" />
          <span>{{ nickname }}</span>
        </span>
        <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
          <a-menu-item key="4" v-if="mode === 'sidemenu'">
            <a @click="appToggled()">
              <a-icon type="swap" />
              <span>切换应用</span>
            </a>
          </a-menu-item>
          <!--<a-menu-item key="0">
            <router-link :to="{ name: 'center' }">
              <a-icon type="user"/>
              <span>个人中心</span>
            </router-link>
          </a-menu-item> -->
          <a-menu-item key="1">
            <router-link :to="{ name: 'settings' }">
              <a-icon type="setting" />
              <span>账户设置</span>
            </router-link>
          </a-menu-item>
          <a-menu-item key="2">
            <a @click="sendMessage()">
              <a-icon type="message" />
              <span>消息发送测试</span>
            </a>
          </a-menu-item>
          <a-menu-divider />
          <a-menu-item key="3">
            <a href="javascript:;" @click="handleLogout">
              <a-icon type="logout" />
              <span>退出登录</span>
            </a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
    <a-modal title="切换应用" :visible="visible" :footer="null" :confirm-loading="confirmLoading" @cancel="handleCancel">
      <a-form :form="form1">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="选择应用">
          <a-menu mode="inline" :default-selected-keys="this.defApp" style="border-bottom:0px;lineHeight:55px;">
            <a-menu-item v-for="item in userInfo.apps" :key="item.code" style="top:0px;" @click="switchApp(item.code)">
              {{ item.name }}
            </a-menu-item>
          </a-menu>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
  import screenfull from 'screenfull'
  import NoticeIcon from '@/components/NoticeIcon'
  import {
    mapActions,
    mapGetters
  } from 'vuex'
  import {
    ALL_APPS_MENU
  } from '@/store/mutation-types'
  import Vue from 'vue'
  import {
    message
  } from 'ant-design-vue/es'
  import { messagesendtoAll } from '@/utils/messagesend'
  export default {
    name: 'UserMenu',
    components: {
      NoticeIcon,
      screenfull
    },
    props: {
      mode: {
        type: String,
        // sidemenu, topmenu
        default: 'sidemenu'
      }
    },
    data() {
      return {
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          }
        },
        visible: false,
        confirmLoading: false,
        form1: this.$form.createForm(this),
        defApp: [],
        isFullscreen: false
      }
    },

    computed: {
      ...mapGetters(['token', 'nickname', 'avatar', 'userInfo'])
    },
    // 设置signalr令牌
    async mounted() {
      await this.$socket.authenticate(this.token)
    },
    methods: {
      ...mapActions(['Logout', 'MenuChange']),

      handleLogout() {
        this.$confirm({
          title: '提示',
          content: '真的要注销登录吗 ?',
          okText: '确定',
          cancelText: '取消',
          onOk: () => {
            return this.Logout({})
              .then(() => {
                setTimeout(() => {
                  window.location.reload()
                }, 16)
              })
              .catch(err => {
                this.$message.error({
                  title: '错误',
                  description: err.message
                })
              })
          },
          onCancel() {}
        })
      },

      /**
       * 打开切换应用框
       */
      appToggled() {
        this.visible = true
        this.defApp.push(Vue.ls.get(ALL_APPS_MENU)[0].code)
      },

      switchApp(appCode) {
        this.visible = false
        this.defApp = []
        const applicationData = this.userInfo.apps.filter(item => item.code === appCode)
        const hideMessage = message.loading('正在切换应用！', 0)
        this.MenuChange(applicationData[0])
          .then(res => {
            hideMessage()
            // eslint-disable-next-line handle-callback-err
          })
          .catch(err => {
            message.error('应用切换异常' + err)
          })
      },
      handleCancel() {
        this.form1.resetFields()
        this.visible = false
      },
      /* 全屏切换 */
      toggleFullscreen() {
        if (!screenfull.isEnabled) {
          message.error('您的浏览器不支持全屏模式')
          return
        }
        screenfull.toggle()
        if (screenfull.isFullscreen) {
          this.isFullscreen = false
        } else {
          this.isFullscreen = true
        }
      },
      // 发送消息测试
      sendMessage() {
        messagesendtoAll(Object.assign({ title: '测试标题', message: '这是消息内容', messagetype: 1 }))
      },
    },
    // signalr接收的信息
    sockets: {
      ReceiveMessage(data) {
        switch (data.messagetype) {
          case 0:
            this.$notification.info({
              message: data.title,
              description: data.message,
              placement: 'bottomRight',
              duration: null
            })
          break
          case 1:
            this.$notification.success({
              message: data.title,
              description: data.message,
              placement: 'bottomRight',
              duration: null
            })
          break
          case 2:
            this.$notification.warning({
              message: data.title,
              description: data.message,
              placement: 'bottomRight',
              duration: null
            })
          break
          case 3:
            this.$notification.error({
              message: data.title,
              description: data.message,
              placement: 'bottomRight',
              duration: null
            })
          break
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .appRedio {
    border: 1px solid #91d5ff;
    padding: 10px 20px;
    background: #e6f7ff;
    border-radius: 2px;
    margin-bottom: 10px;
    color: #91d5ff;
    /*display: inline;
    margin-bottom:10px;*/
  }
</style>
